<template>
  <div class="container">
    <h1>Vue3 3D卡片动画效果</h1>
    <div class="card-grid">
      <div v-for="(card, index) in cards" :key="index" class="card">
        <div class="card-inner">
          <!-- 正面 -->
          <div class="card-face card-front shine-effect">
            <div class="card-icon">{{ card.frontIcon }}</div>
            <div class="card-title">{{ card.frontTitle }}</div>
            <div class="card-content">{{ card.frontContent }}</div>
          </div>
          <!-- 背面 -->
          <div class="card-face card-back">
            <div class="card-title">{{ card.backTitle }}</div>
            <div class="card-content">{{ card.backContent }}</div>
            <button class="card-button">了解更多</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const cards = ref([
  {
    frontIcon: "💡", frontTitle: "创意设计", frontContent: "探索无限创意可能性",
    backTitle: "创意解决方案", backContent: "我们提供独特的设计思路和创意解决方案，帮助您的项目脱颖而出。"
  },
  {
    frontIcon: "🚀", frontTitle: "极致性能", frontContent: "体验卓越的性能表现",
    backTitle: "性能优化", backContent: "通过先进的技术优化，确保您的应用运行流畅、响应迅速。"
  },
  {
    frontIcon: "❤️", frontTitle: "用户体验", frontContent: "以用户为中心的设计",
    backTitle: "用户至上", backContent: "我们始终将用户体验放在首位，打造直观易用的交互界面。"
  }
]);
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 20px;
  padding-top: 50px;
  background: linear-gradient(45deg, #2c3e50, #4a69bd);
  font-family: "Arial", sans-serif;
  overflow: hidden;
  height: 100vh;
}

h1 {
  text-align: center;
  color: white;
  margin-bottom: 40px;
  font-size: 36px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.card {
  width: 300px;
  height: 400px;
  perspective: 1500px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: hidden;
}

.card-front {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

.card-back {
  background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
  color: white;
  transform: rotateY(180deg);
}

.card-icon {
  font-size: 60px;
  margin-bottom: 20px;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.card-content {
  text-align: center;
  line-height: 1.6;
  font-size: 16px;
  padding: 0 15px;
}

.card-button {
  margin-top: 25px;
  padding: 12px 30px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  color: white;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.card-button:hover {
  background: white;
  color: #ff758c;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
</style>
